<template>
  <div class="computer-container">
    <div class="top-bar">
      <div class="info-section">
        <span>此电脑></span>
      </div>
      <div class="search-section">
        <input type="text" placeholder="搜索" class="search-input">
      </div>
    </div>
    <div class="main-content">
      <div class="sidebar">
        <div class="pinned-section">
          <h3>已固定</h3>
          <div class="sidebar-item active">
            <img src="../assets/icon/disk.png" alt="此电脑" class="icon">
            <span>此电脑</span>
          </div>
          <div class="sidebar-item">
            <img src="../assets/icon/disk.png" alt="网络" class="icon">
            <span>网络</span>
          </div>
        </div>
        <div class="tags-section">
          <h3>标签</h3>
          <div v-for="tag in tags" :key="tag.color" class="tag" :style="{ backgroundColor: tag.color }"></div>
        </div>
      </div>
      <div class="content">
        <h2>设备和驱动器</h2>
        <div class="devices">
          <div v-for="disk in disks" :key="disk.name" class="device-item">
            <div class="device-icon">
              <img :src="disk.icon" :alt="disk.name" class="icon">
            </div>
            <div class="device-info">
              <span class="device-name">{{ disk.name }}</span>
              <div class="progress-bar">
                <div class="progress" :style="{ width: `${disk.usedPercentage}%` }"></div>
              </div>
              <span class="device-space">{{ disk.available }}GB 可用，共 {{ disk.total }}GB</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,getCurrentInstance } from 'vue';
const {
	proxy
} = getCurrentInstance();
const disks = ref([
  { name: '本地磁盘 (C:)', icon: proxy.$util.urlProceIcon('disk.png'), available: 50, total: 256, usedPercentage: 80 },
  { name: '本地磁盘 (D:)', icon: proxy.$util.urlProceIcon('disk.png'), available: 200, total: 512, usedPercentage: 60 }
]);

const tags = ref([
  { color: '#FF0000' },
  { color: '#00FF00' },
  { color: '#0000FF' },
  { color: '#FFFF00' }
]);
</script>

<style scoped lang="less">
.computer-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--window-background);
  border-radius: 8px;
  overflow: hidden;
  color: var(--thisText); 
  user-select: none; // 不可选中
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--top-bar-background);
}

.info-section {
  font-size: 14px;
  color: var(--thisText);
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background-color: var(--search-background);
  color: var(--thisText);
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px var(--thisShadow);

  &:focus {
    box-shadow: 0 4px 8px var(--thisShadow);
    background-color: var(--item-background);
  }

  &::placeholder {
    color: var(--thisTextTransparent);
  }
}

.search-section::after {
  content: '🔍';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--thisTextTransparent);
  pointer-events: none;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin; 
  scrollbar-color: var(--thisTextTransparent) var(--window-background); 
  border-right: 1px solid var(--border-color); 
}

.pinned-section, .tags-section {
  background-color: var(--item-background);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px var(--thisShadow);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 6px 8px var(--thisShadow); 
  }
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 6px 10px; 
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 4px; 
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--item-hover-background);
  }
}

.sidebar-item .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--thisTextTransparent) var(--window-background);
  background-color: var(--content-background);
  border-left: 1px solid var(--border-color); 
}

h2, h3 {
  margin-bottom: 15px;
  color: var(--thisText);
}

.sidebar-item.active {
  background-color: var(--active-item-background);
}

.tags-section {
  margin-top: 20px;
}

.tag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.devices {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.device-item {
  display: flex;
  align-items: center;
  width: 210px;
  padding: 10px;
  background-color: var(--item-background);
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px var(--thisShadow);

  &:hover {
    background-color: var(--item-hover-background);
    box-shadow: 0 6px 8px var(--thisShadow);
    transform: translateY(-2px);
  }
}

.device-icon {
  flex-shrink: 0;
  margin-right: 15px;
}

.icon {
  width: 48px;
  height: 48px;
}

.device-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.device-name {
  font-size: 14px; 
  font-weight: bold;
  color: var(--thisText);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar {
  height: 6px;
  background-color: var(--progress-background);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress {
  height: 100%;
  background-color: var(--progress-fill);
}

.device-space {
  font-size: 12px;
  color: var(--thisTextTransparent);
}

.sidebar-item, .content {
  color: var(--thisText);
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    padding: 10px;
    border-right: none; 
    border-bottom: 1px solid var(--border-color);
  }

  .content {
    border-left: none;
  }
}

.sidebar, .content {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: var(--window-background);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--thisTextTransparent);
    border-radius: 4px;
    transition: background 0.3s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--thisText);
  }
}
</style>